<template>
  <div class="sideBar">
    <!-- 备选库 -->
    <div class="side-title">
      <div class="switch">
        <div class="switch-main" @click="isSlide">
          <div class="switch-left">
            <i class="icon icon-leftArrow"></i>
          </div>
          <div class="switch-right">
            <div class="switch-num">
              <em>{{sum}}</em>
              <!-- <i class="icon icon-xing"></i> -->
              <i class="round"></i>
            </div>
            <p>备选库</p>
          </div>
        </div>
      </div>
    </div>
    <transition name="slide">
      <div class="container" v-show="slide">
        <div class="mask" @click="isSlide"></div>
        <div class="bak">
          <div class="switch">
            <div class="switch-main active" @click="isSlide">
              <div class="switch-left">
                <i class="icon icon-leftArrow"></i>
              </div>
              <div class="switch-right">
                <div class="switch-num">
                  <em>{{sum}}</em>
                  <!-- <i class="icon icon-xing"></i> -->
                  <i class="round"></i>
                </div>
                <p>备选库</p>
              </div>
            </div>
          </div>

          <!-- <div class="bak-box" style="overflow-y:scroll">
            <header>备选库</header>
            <div>
              <slot></slot>
            </div>
          </div> -->

          <div class="bak-box">
            <vue-scroll>
              <div class="bak-main">
                  <header>备选库</header>
                  <div>
                    <slot></slot>
                  </div>
              </div>
            </vue-scroll>
          </div>

        </div>
      </div>
    </transition>

  </div>
</template>
<script>
export default {
  data () {
    return {
      slide: false
    }
  },
  methods: {
    isSlide () {
      // console.log('点到了')
      this.slide = !this.slide
      this.$emit('event', this.slide)
    }
  },
  props: {
    sum: {
      type: Number,
      default: 0
    }
  },
  watch: {
    sum (val, oldval) {
    }
  }
}
</script>

<style scoped lang="scss">
  $titleW:55px;
  $contentW:415px;

  .switch{
    width:$titleW; height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    &-main{
      width:100%; height:126px;
      border-radius:10px 0px 0px 10px;
      box-shadow: -2px 0 5px $shadow;
      display:flex;
      align-items:center;
      cursor:pointer;
      color:$positive;
      background:$light;
      i.round{
        border:1px solid $positive;
      }
      &.active{
        color:$light;
        background:$positive;
        i.round{
          border:1px solid $light;
        }
        .switch-left{
          transform: rotate(180deg);
          text-align: left;
        }
      }
    }
    &-left{
      width:20px;
      text-align:right;
      i{
        font-size:14px;
      }
    }
    &-right{
      display:flex;
      flex-direction: column;
      align-items:center;
      .switch-num{
        position:relative;
        margin-top:-10px;
        width:100%; text-align:center;
        height:100%; line-height:1.0;
        em{
          margin-top:-1px;
          font-style:normal;
          position:absolute;
          width:100%; height:100%;
          display:flex; align-items:center;
          justify-content: center;
          font-size:10px;
        }
        i{
          // font-size:30px;
          display: inline-block;
          min-width:26px;
          height:26px;
          border-radius:50%;
        }
      }
      p{
        writing-mode: vertical-lr;
      }
    }
  }

  .sideBar{
    position:fixed; right:0px; top:0px; z-index:10;
    height:100%;

    .side-title{
      position:absolute; right:0; top:0; z-index:1;
      width:50px; height:100%;
      padding-top:50px;
    }
    .container{
      position:relative; z-index:2;
      padding-top:50px;
      width:$titleW+$contentW;
      height:100%;
      display:flex;
      // transition: all .5s;
      &.slide-enter{
        transform:translateX($contentW)
        // transform:translateX(100%)
      }
      &.slide-enter-active{
        transition: all .5s;
      }
      // &.slide-enter-to{
      //   transform:translateX(0)
      // }
      // &.slide-leave-active{
      //   transform:translateX(100%);
      //   transition: all .5s;
      // }
      .mask{
        position:absolute; right:0px; top:0px; z-index:1;
        height:100%; width:1000%;
        background:$mask;
      }
      .bak{
        position:relative; z-index:2;
        height:100%; width:100%;
        display:flex;
        .bak-box{
          box-shadow:-2px 0 5px $shadow;
          background:$light;
          flex:1;
          overflow: hidden;
          height:100%;
          header{
            font-size:24px; color:#333;
            padding:25px 0;
            text-align:center;
            border-bottom:1px solid $line;
          }
          .bak-main{
            width:415px;
            padding:0 15px 20px;
          }
        }
      }
    }

  }
</style>
